import React, { memo, useState } from "react";
import { Button, Input, Form } from "react-vant";
import axios from "@/utils/axios";
import { useNavigate } from "react-router";
import style from "./index.module.scss";
import { Toast } from "react-vant";
import { debounce } from "../../utils/debounce/debounce";
const Index: React.FC = memo(() => {
  const [checked, setChecked] = useState(false);
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const onFinish = debounce(async (values) => {
    if (!checked) {
      Toast.fail("请勾选用户协议");
      return;
    }
    console.log(values);
    // 登录接口调用
    const res = await axios.post("/login", {
      username: values.username,
      password: values.password,
    });
    localStorage.setItem("img", res.data.data.img);
    localStorage.setItem("username", res.data.data.username);
    console.log(res);
    navigate("/my");
  });

  return (
    <div>
      <h2 style={{ marginLeft: "10px", marginTop: "10px" }}>登录春雨医生</h2>
      <br />
      <Form
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: "16px 16px 0" }}>
            <Button
              round
              nativeType="submit"
              style={{ backgroundColor: "#69d248", color: "white" }}
              block
            >
              登录
            </Button>
          </div>
        }
      >
        <Form.Item
          rules={[
            { required: true ,
            
              validator: (_, value) => {
                if (!value) return Promise.reject(new Error("请输入手机号"));
                if (/^1[3-9]\d{9}$/.test(value)) {
                  return Promise.resolve(true);
                }
                return Promise.reject(new Error("请输入正确的手机号码"));
              },
            },
          ]}
          validateTrigger="onBlur"
          name="username"
          label="手机号"
        >
          <Input placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          rules={[{ required: true, message: "请填写密码" }]}
          name="password"
          label="密码"
        >
          <Input placeholder="请输入密码" />
        </Form.Item>
      </Form>
      <div>
        <div className={style.loginzuo}>
          <div className={style.loginzuo1}>
            <input
              type="checkbox"
              className={style.kuang111}
              onChange={setChecked}
            />
          </div>
          <div className={style.yuedu}>
            <p>
              我已阅读并同意{" "}
              <span style={{ color: "green" }}>
                《春雨医生用户协议》《隐私政策》
              </span>
              , 为注册自动完成账户注册
            </p>
          </div>
        </div>
      </div>
    </div>
  );
});

export default Index;
